<template>
  <b-container>
    <b-row class="my-2 justify-content-center my-md-4">
      <b-col class="mt-2 mt-md-4 form-border" cols="10" sm="8" md="6" lg="4">
        <h2 class="text-center my-3 font-weight-bold">用户注册</h2>
        <b-form class="font-weight-bold mb-3">
          <b-form-group
              id="input-username"
              label="账号:"
              label-for="input-1"
              description="该账号将被用于登录"
          >
            <b-form-input
                id="input-1"
                v-model="form.username"
                type="text"
                :state="status.username_state"
                required
                placeholder="请输入账号"
                @blur="validUsername"
            ></b-form-input>
            <b-form-invalid-feedback id="input-1-feedback" v-text="warn.username_warn">
              errr
            </b-form-invalid-feedback>

          </b-form-group>
          <b-form-group
              id="input-nickname"
              label="昵称:"
              label-for="input-2"
          >
            <b-form-input
                id="input-2"
                v-model="form.nickname"
                type="text"
                :state="status.nickname_state"
                required
                placeholder="请输入昵称"
                @blur="validNickname"
            ></b-form-input>
            <b-form-invalid-feedback id="input-2-feedback" v-text="warn.nickname_warn">
              errorhere
            </b-form-invalid-feedback>
          </b-form-group>
          <b-form-group
              id="input-password"
              label="密码:"
              label-for="input-3"
              description="密码长度需在6-16位且同时包含字母数字"
          >
            <b-form-input
                id="input-3"
                v-model="form.password"
                type="password"
                required
                :state="status.password_state"
                placeholder="请输入密码"
                @blur="validPassword"

            ></b-form-input>
            <b-form-invalid-feedback id="input-3-feedback" v-text="warn.password_warn">
              errorhere
            </b-form-invalid-feedback>
          </b-form-group>
          <b-form-group
              id="input-confirm-password"
              label="确认密码:"
              label-for="input-4"
          >
            <b-form-input
                id="input-4"
                v-model="form.confirm"
                type="password"
                :state="status.confirm_state"
                required
                placeholder="请再次输入密码"
                @blur="validConfirm"
            ></b-form-input>
            <b-form-invalid-feedback id="input-4-feedback" v-text="warn.confirm_warn">
              errorhere
            </b-form-invalid-feedback>
          </b-form-group>
          <b-col class="text-center">
            <b-btn variant="info" class="justify-self-center bg-theme border-0 ml-auto mr-2" @click="OnSubmit" v-if="!isProcessing"> 注册</b-btn>
            <b-btn variant="info" class="justify-self-center bg-theme border-0 ml-auto mr-2" disabled v-else>
              处理中
              <b-spinner variant="light" small class=""/>
            </b-btn>
            <b-btn variant="danger" class="justify-self-center border-0 mr-auto ml-2" @click="OnReset"> 重置</b-btn>
          </b-col>

        </b-form>

      </b-col>

    </b-row>
    <b-row class="justify-content-center">
      <b-col  cols="10" sm="8" md="6" lg="4">
        <b-alert
            variant="danger"
            dismissible
            fade
            :show="hasWarn"
            @dismissed="hasWarn=false"

        >
          {{warnmsg}}
        </b-alert>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
  import en from '../util/encrypt'

  export default {
    name: "Register",
    data() {
      return {
        form: {
          username: '',
          nickname: '',
          password: '',
          confirm: '',
        },
        status: {
          username_state: null,
          nickname_state: null,
          password_state: null,
          confirm_state: null,
        },
        warn: {
          username_warn: '用户名已经被使用|用户名不得长于20个字',
          nickname_warn: '昵称不得长于16个字',
          password_warn: '密码需在6-16位且同时包含字母数字',
          confirm_warn: '两次输入的密码不同',
        },
        isProcessing:false,
        hasWarn:false,
        warnmsg:''
      }
    },
    methods: {
      OnReset() {
        this.form.nickname = ''
        this.form.username = ''
        this.form.password = ''
        this.form.confirm = ''
        this.status.username_state = null;
        this.status.nickname_state = null;
        this.status.password_state = null;
        this.status.confirm_state = null;
      },
      validPassword() {
        let patten = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/
        if (patten.test(this.form.password)) {
          this.status.password_state = true
        } else {
          this.status.password_state = false
          this.warn.password_warn = '密码格式不符合'
        }
        if (this.form.confirm !== ''){
          this.validConfirm()
        }

      },
      validUsername() {
        let patten = /^[0-9A-Za-z@.]{1,20}$/
        if (patten.test(this.form.username)) {
          //调用验证接口 检查是否重名 同步
          let data = {
            username:this.$ajax.encode(this.form.username)
          }
          this.$ajax.post('/user/checkUname',data).then((resp)=>{
            let data = resp.data
            if (data.code === 200){
              this.status.username_state = true
            }else{
              this.status.username_state = false
              this.warn.username_warn = data.msg
            }
          }).catch((err)=>{
            console.log(err);
            this.status.username_state = false
            this.warn.username_warn = '请求失败，请重试'
          })

        } else {
          this.status.username_state = false
          this.warn.username_warn = '用户名不得长于20个字不能包含中文'
        }
      },
      validNickname() {
        let pattern = /^[\u4e00-\u9fa5\w\d@.-_]{1,20}$/
        if (pattern.test(this.form.nickname)) {
          this.status.nickname_state = true
        } else {
          this.status.nickname_state = false
          this.warn.nickname_warn = '昵称不得长于20个字'
        }
      },
      validConfirm() {
        if (
          this.status.password_state
          && this.form.password === this.form.confirm
        ) {
          this.status.confirm_state = true
        } else {
          this.status.confirm_state = false
          this.warn.confirm_warn = '两次输入的密码不匹配'
        }
      },
      OnSubmit(){
        this.validUsername()
        if (this.status.username_state &&
            this.status.nickname_state &&
            this.status.password_state &&
            this.status.confirm_state
        ){ //都非空
          this.isProcessing = true;
          let data = {
            username:this.$ajax.encode(this.form.username),
            nickname:this.$ajax.encode(this.form.nickname),
            password:this.$ajax.encode(this.form.password),
          }
          this.$ajax.post('/user/newUser',data).then((resp)=>{
            let data = resp.data
            console.log(data);
            if (data.code === 200){
              this.warnmsg = data.msg
              this.hasWarn = true
              this.$store.commit("init",data.data)
              this.$router.replace("/")

            }else{
              this.warnmsg = data.msg
              this.hasWarn = true
            }
          }).catch((err)=>{
            this.warnmsg = '请求错误，请稍后重试'
            this.hasWarn = true
          })
          this.isProcessing = false
        }else{
          this.warnmsg = '请先填写完整'
          this.hasWarn = true
        }



      },

    },
    computed:{

    }
  }
</script>

<style scoped>
  .form-border {
    border: #b8b8b8 1px solid;
    border-radius: 5px;
  }
</style>